<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商机列表</title>
    <link rel="stylesheet" href="../elementui-2.15.6/element-icons.ttf">
    <link rel="stylesheet" href="../elementui-2.15.6/element-icons.woff">
    <link rel="stylesheet" href="../elementui-2.15.6/icon.css">
    <link rel="stylesheet" href="../elementui-2.15.6/elmentui.css">
    <link rel="stylesheet" href="../common.css">
    <link rel="stylesheet" href="./index.css">
    <script src='../vue-2.6.12.js'></script>
    <script src='../elementui-2.15.6/elementui.js'></script>
</head>

<body>
    <div id="app" class="business-opp-box">
        <div class="search-box">
            <el-form :inline="true" :model="formInline" class="demo-form-inline"  size="mini">
                <el-form-item label="商机名称:">
                    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
                </el-form-item>
                <el-form-item label="创建人:">
                    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
                </el-form-item>
                <el-form-item label="客户名称:">
                    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
                </el-form-item>
                <el-form-item label="商机状态:">
                    <el-select v-model="formInline.region" placeholder="活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="跨区:">
                    <el-select v-model="formInline.region" placeholder="活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table-box">
            <el-table :data="tableData" style="width: 200%"  ref="multipleTable">
                <el-table-column
                type="selection"
                width="55">
              </el-table-column>
                <el-table-column prop="date" label="商机状态" width="180">
                </el-table-column>
                <el-table-column prop="name" label="商机说明" width="180">
                </el-table-column>
                <el-table-column prop="address" label="商机编号" width="150">
                </el-table-column>
                <el-table-column prop="date" label="商机名称" width="150" >
                </el-table-column>
                <el-table-column prop="name" label="商机报备人" width="150">
                </el-table-column>
                <el-table-column prop="address" label="最终用户名称" width="150">
                </el-table-column>
                <el-table-column prop="date" label="跨区" width="150">
                </el-table-column>
                <el-table-column prop="name" label="集成商" width="150">
                </el-table-column>
                <el-table-column prop="address" label="所跨区域" width="150">
                </el-table-column>   
                <el-table-column prop="name" label="全国保护项目" width="150">
                </el-table-column>
                <el-table-column prop="date" label="创建时间" width="150">
                </el-table-column>
               
                <el-table-column prop="address" label="商机金额" width="150">
                </el-table-column>
            </el-table>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    helloWord: '你好',
                    tableData: [{
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区'
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区'
                    }],
                    formInline: {
                        user: '',
                        region: ''
                    }
                }
            },
            methods: {
                onSubmit() {
                    console.log('submit!');
                }
            }
        })
    </script>
</body>

</html>